<template>
    <div>
        <Tabs :value="tabValue" @on-click="tabClick">
            <TabPane label="已上架" name="1"></TabPane>
            <TabPane label="仓库中" name="0"></TabPane>
            <TabPane label="回收站" name="2"></TabPane>
        </Tabs>
        <div>
            <div class="search-con search-con-top">
                名称：
                <Input v-model="searchData.name" style="width: 200px"></Input>
                城市:
                <Select v-model="searchData.city_id" filterable style="width: 200px">
                    <Option :value="val.city_id" v-for="val in cityArr" :key="val.id">{{ val.city_name }}</Option>
                </Select>
                <Button @click="search" type="primary" icon="ios-search" style="margin-left: 10px;">搜索</Button>
                <Button @click="reset" type="success" icon="ios-refresh" style="margin-left: 10px;">重置</Button>
                <Button slot="extra" @click="goodsStatus(false, 0)" type="warning" v-if="tabValue == 1"
                    style="margin-left: 10px;">批量下架</Button>
                <Button slot="extra" @click="goodsStatus(false, 1)" type="info" v-if="tabValue != 1"
                    style="margin-left: 10px;">批量上架</Button>
                <Button slot="extra" @click="showAddRoleDrawer(false)" type="primary" v-if="tabValue == 1"
                    style="margin-left: 10px;">添加</Button>
            </div>
            <br>
            <Table :columns="columns" :data="list" @on-sort-change="customSort" :highlight-row="true" max-height="800"
                border stripe @on-selection-change="tableSelect" size="small">
                <template slot-scope="{ row , index}" slot="imgSlot">
                    <show-img :imgUrl="row.image"></show-img>
                </template>
                <template slot-scope="{ row , index}" slot="memberSlot">
                    <Button type="primary" @click="showAddRoleDrawer(row)" style="margin-left: 10px;" v-if="tabValue == 1"
                        size="small">编辑</Button>
                    <Button type="info" @click="goodsStatus(row.id, 1)" style="margin-left: 10px;" size="small"
                        v-if="tabValue != 1">上架</Button>
                    <Button type="warning" @click="goodsStatus(row.id, 0)" style="margin-left: 10px;" size="small"
                        v-if="tabValue == 1">下架</Button>
                    <Button type="error" @click="del(row.id, tabValue)" style="margin-left: 10px;" size="small"
                        v-if="tabValue == 0 || tabValue == 2">删除</Button>


                    <!-- <Button type="error" @click="showTeamModal1(row.id, row.type)" style="margin-left: 10px;"
                        v-if="tabValue == 1" size="small">团队</Button> -->

                </template>
            </Table>
            <Paginate :total="total" @on-change="changePage" @on-page-size-change="changeSize">
            </Paginate>

            <Modal :title="goodsInfo.id == 0 ? '添加' : '编辑'" width="40" v-model="showAdd" :mask-closable="false">
                <Form ref="formValidate" :model="goodsInfo" :label-width="90">
                    <FormItem label="适用城市">
                        <Select v-model="goodsInfo.city_id" filterable multiple>
                            <Option :value="val.city_id" v-for="val in cityArr" :key="val.id">{{ val.city_name }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="套餐名称">
                        <Input v-model="goodsInfo.name"></Input>
                    </FormItem>
                    <FormItem label="缩略图" class="item">
                        <MyUpload :maxNumber="1" @getImages="getImg" :defaultImags="[goodsInfo.image]"></MyUpload>
                    </FormItem>
                    <FormItem label="总时长(小时)">
                        <Input v-model="goodsInfo.total" type="number"></Input>
                    </FormItem>
                    <FormItem label="起约时长">
                        <Input v-model="goodsInfo.min" type="number"></Input>
                    </FormItem>
                    <FormItem label="原价(元)">
                        <Input v-model="goodsInfo.old_price" type="number"></Input>
                    </FormItem>
                    <FormItem label="现价(元)">
                        <Input v-model="goodsInfo.price" type="number"></Input>
                    </FormItem>
                    <FormItem label="有效期(天)">
                        <Input v-model="goodsInfo.day" type="number"></Input>
                    </FormItem>
                    <FormItem label="销量">
                        <Input v-model="goodsInfo.sale_num" type="number"></Input>
                    </FormItem>
                    <FormItem label="排序值">
                        <Input v-model="goodsInfo.sort" type="number"></Input>
                    </FormItem>
                    <FormItem label="详情">
                        <RichText ref="ric" @getEditorContent="getRichTextContent"></RichText>
                    </FormItem>

                </Form>
                <div slot="footer">
                    <Button type="primary" size="large" long @click="submit">确定</Button>
                </div>
            </Modal>

        </div>
    </div>
</template>

<script>
import Paginate from "_c/paginate";
import MyUpload from "_c/my-upload"
import RichText from "_c/rich-text"
import ShowImg from '_c/show_img'
export default {
    name: "goodsList",
    components: {
        Paginate, RichText, MyUpload, ShowImg
    },
    data() {
        return {
            // 列表
            columns: [
                {
                    type: 'selection',
                    align: "center",
                    maxWidth: 60,
                    align: 'center'
                },
                {
                    title: 'ID',
                    align: "center",
                    key: 'id',
                    maxWidth: 90,
                    sortable: 'custom',
                },
                {
                    title: '名称',
                    align: "center",
                    key: 'name',
                    sortable: 'custom',
                },
                {
                    title: '图片',
                    align: "center",
                    key: 'img',
                    slot: "imgSlot"
                },

                {
                    title: '总时长(小时)',
                    align: "center",
                    key: 'total',
                    sortable: 'custom',
                },
                {
                    title: '起约(小时)',
                    align: "center",
                    key: 'min',
                    sortable: 'custom',
                },
                {
                    title: '价格(元)',
                    align: "center",
                    key: 'price',
                    sortable: 'custom',
                },
                {
                    title: '有效天数',
                    align: "center",
                    key: 'day',
                    sortable: 'custom',
                },
                {
                    title: '开通城市',
                    align: "center",
                    key: 'city_txt',
                    sortable: 'custom',
                },
                {
                    title: '销量',
                    align: "center",
                    key: 'sale_num',
                    sortable: 'custom',
                },
                {
                    title: '排序值',
                    align: "center",
                    key: 'sort',
                    sortable: 'custom',
                },
                {
                    title: '创建时间',
                    align: "center",
                    key: 'create_time',
                    sortable: 'custom',
                },
                {
                    title: '操作',
                    align: "center",
                    key: 'make',
                    slot: 'memberSlot',
                },
            ],
            // 数据
            list: [],
            total: 0,
            searchData: {
                page: 1,
                limit: 10,
                status: 1,
                menu_type: 1,
            },
            showAdd: false,
            cateList: [],
            cityArr: [],
            // 管理信息
            goodsInfo: {},
            tabValue: "1",
            tableSelectIdArr: [],
        }
    },
    methods: {
        getImg(items) {
            items.forEach(item => {
                this.goodsInfo.image = item.url;
            });
        },
        getRichTextContent(value) {
            this.goodsInfo.detail = value;
        },
        getList() {
            this.$axios('/admin/partner/goods/getList', this.searchData).then(res => {
                this.list = res.data;
                this.total = res.total;
            });
        },
        search() {
            this.searchData.page = 1;
            this.getList();
        },
        reset() {
            this.searchData = {
                page: 1,
                limit: 10,
                status: 1,
                menu_type: 1,
            };
            this.getList();
        },
        changePage(page) {
            this.searchData.page = page;
            this.getList();
        },
        changeSize(size) {
            this.searchData.limit = size;
            this.getList();
        },
        customSort(column, key, order) {
            this.searchData.order_by = column.key;
            this.searchData.sort = column.order;
            this.getList();
        },
        // 显示添加角色弹窗
        showAddRoleDrawer(row) {
            if (row) {
                this.goodsInfo = { ...row };
            } else {
                this.goodsInfo = {
                    menu_type: 1,
                    status: 1,
                }
            }
            this.showAdd = true;
            this.$nextTick(() => {
                this.$refs.ric.setContent(this.goodsInfo.detail);
            });
        },
        // 添加角色
        submit() {
            this.$axios('/admin/partner/goods/save', this.goodsInfo).then(res => {
                this.$Message.success('保存成功');
                this.showAdd = false;
                this.goodsInfo = {};
                this.getList();
            })
        },
        handleSuccess(res, file) {
            this.$set(this.goodsInfo, 'image', res.data.src)
            // this.goodsInfo.image = res.data.src;
        },
        handleSuccess3(res, file) {
            this.$set(this.goodsInfo, 'limit_intro', res.data.src)
            // this.goodsInfo.limit_intro = res.data.src;
        },
        handleSuccess1(res, file) {
            this.goodsInfo.banner.push(res.data.src);
        },
        handleSuccess2(res, file) {
            this.goodsInfo.detail.push(res.data.src);
        },
        handleFormatError(file) {
            this.$Notice.warning({
                title: "文件格式错误",
                desc: "不支持该文件类型",
            });
        },
        handleView(item) {
            this.imgUrl1 = item;
            this.visible = true;
        },
        handleRemove(index, type) {
            if (type == 0) {
                this.goodsInfo.banner.splice(index, 1);
            } else {
                this.goodsInfo.detail.splice(index, 1);
            }
        },
        del(id, status) {
            if (status == 2) {
                this.$Modal.confirm({
                    title: '删除',
                    content: "<p>您确定要删除吗？</p>",
                    onOk: () => {
                        this.$axios('/admin/partner/goods/del', { id: id, status: status }).then(res => {
                            this.$Message.success('删除成功');
                            this.getList();
                        })
                    },
                    onCancel: () => {
                        this.$Message.info('取消操作');
                    }
                });

            } else {
                this.$Modal.confirm({
                    title: '放入回收站',
                    content: "<p>您确定要放入回收站吗？</p>",
                    onOk: () => {
                        this.$axios('/admin/partner/goods/status', { id: id, status: 2 }).then(res => {
                            this.$Message.success('操作成功');
                            this.getList();
                        })
                    },
                    onCancel: () => {
                        this.$Message.info('取消操作');
                    }
                });

            }
        },
        getCategoryArr() {
            this.$axios('/admin/goods/getCategoryArr', {}).then(res => {
                this.cateList = res;
            });
        },
        tabClick(value) {
            this.tabValue = value;
            this.searchData.status = value;
            this.tableSelectIdArr = [];
            this.getList();
        },
        tableSelect(selection) {
            let arr = [];
            selection.forEach(item => {
                arr.push(item.id);
            });
            this.tableSelectIdArr = arr;
        },
        goodsStatus(id, status) {
            let idArr = [];
            if (id) {
                idArr.push(id);
            } else {
                idArr = this.tableSelectIdArr;
            }
            if (idArr.length == 0) {
                this.$Message.error('请先选择商品');
                return
            }
            this.$axios('/admin/partner/goods/status', { id: idArr, status: status }).then(res => {
                this.$Message.success('执行成功');
                this.getList();
            });
        },
        delImg() {
            this.goodsInfo.limit_intro = "";
        },
        incrSku() {
            let attr = { "min": "", "max": "", "price": "", };
            this.goodsInfo.goods_sku.push(attr);
        },
        decSku(index) {
            this.goodsInfo.goods_sku.splice(index, 1);
        },
        // 团队
        changePage1(page) {
            this.searchData1.page1 = page;
            this.getTeamList();
        },
        changeSize1(size) {
            this.searchData1.limit1 = size;
            this.getTeamList();
        },
        showTeamModal(id, type) {
            this.$axios('/admin/goods/getTeamList', { goods_id: id }).then(res => {
                this.list11 = res;
            });
            this.showTeam = true;
        },
        showTeamModal1(id, type) {
            this.searchData1.goods_id = id;
            this.showTeam1 = true;
            this.bindInfo.goods_id = id;
            this.getTeamList1();
        },
        getTeamList1() {
            this.$axios('/admin/goods/getTeamList1', this.searchData1).then(res => {
                this.list1 = res.data;
                this.total = res.total;
            });
        },
        loadData(item, callback) {
            this.$axios('/admin/goods/getTeamList2', { tid: item.tid, uid: item.uid, gid: item.gid }).then(res => {
                callback(res);
            });
        },
        showBindModal(teamId) {
            this.bindInfo.team_id = teamId;
            this.bindInfo.mobile = "",
                this.bindInfo.type = '';
            this.bindModal = true;
        },
        bindModalOK() {
            this.$axios('/admin/goods/bindUser', this.bindInfo).then(res => {
                this.$Message.success('执行成功');
                this.getTeamList1();
            });
        },
        timestampToDate(timestamp) {
            let date = new Date(timestamp);
            let year = date.getFullYear();
            let month = date.getMonth() + 1; // 月份从0开始，需要加1
            let day = date.getDate();
            let hours = date.getHours();
            let minutes = date.getMinutes();
            let seconds = date.getSeconds();
            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        },
        getOpenCityList() {
            this.$axios("/admin/partner/city/getArr").then(res => {
                this.cityArr = res;
            });
        },
    },
    created() {
        // 查询自己管理员
        this.getList();
        this.getOpenCityList();
    }
}
</script>